<template>
  <!-- checkStrictly: 是否严格遵守父子节点互不关联, 开启后父是父, 子是子, 各论各的, 每个节点都能独立被选中, 即可实现树枝节点的数据回显 -->
  <el-cascader
    :value="value"
    :options="depts"
    :props="{ label: 'name', value: 'id', checkStrictly: true }"
    size="mini"
    separator="-"
    @change="hChange"
  />
</template>

<script>
import { getDepartments } from '@/api/department'
import { transListToTree } from '@/utils'
export default {
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      depts: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.depts = transListToTree(await getDepartments())
    },
    hChange(val) {
      // 俩方法都是用来获取最后一个元素的
      // console.log(val[val.length - 1])
      // console.log([...val].pop())
      this.$emit('input', [...val].pop())
    }
  }
}
</script>
